<!doctype html>
<html class="no-js" lang="">
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>五子棋</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/main1.css">
    <script src="js/danji.js"></script>
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<!--<body style="background-image: url('img/woodfloor.jpg') ; text-align: center;">-->
<body style="background-color: #f0f0f0 ; text-align: center;">

<div id="contain_in" style="background-image: url('img/b2.jpeg'); ">
    <div  style="width: 75%;height: 100%; float: left; display: block; text-align: center;background-color: #f0ad4e">
        <canvas id="myCanvas" width="510px;" height="510px" ;  onclick="chessClick(event)">


        </canvas>
    </div>
    <div style="width: 25%; height: 100%; display: block; float: left;text-align: center; background-color: #0a628f">
        <p>
            <a href="home.jsp"> <button type="button" class="btn btn-primary btn-lg" style=" margin-top: 100px;" >返回</button></a>

        </p>
        <p>
            <button type="button" class="btn btn-primary btn-lg" onclick="undo()" style=" margin-top: 100px;">悔棋</button>


        </p>
        <p>
            <a href="two.html"><button type="button" class="btn btn-primary btn-lg"  style=" margin-top: 100px;">重新开始</button></a>


        </p>

    </div>

</div>
   <script>
       var a1;
       var b1;
       var a2;
       var b2;
       var computer=[];
       var my=[];

       var me=true;
       var imgwhile = new Image();
       imgwhile.src = "img/keleyiw.png";
       var imgblack = new Image();
       imgblack.src = "img/keleyib.png";
       var chess=document.getElementById('myCanvas');
       var ctn=chess.getContext('2d');
       var solid=34;
       for (var i = 0; i <= solid*15; i += solid) {
           //绘制横线
           ctn.beginPath();
           ctn.moveTo(0, i);
           ctn.lineTo(solid*15, i);
           ctn.closePath();
           ctn.stroke();
           //绘制竖线
           ctn.beginPath();
           ctn.moveTo(i, 0);
           ctn.lineTo(i, solid*15);
           ctn.closePath();
           ctn.stroke();
       }

       ctn.fillStyle = "#000";//填充canvas的背景颜色
       ctn.fillRect(3*solid-6, 3*solid-6, 12, 12);//参数分别表示 x轴,y轴,宽度,高度
       ctn.fillRect(12*solid-6, 3*solid-6, 12, 12);
       ctn.fillRect(7*solid-6, 7*solid-6, 12, 12);
       ctn.fillRect(3*solid-6, 12*solid-6, 12, 12);
       ctn.fillRect(12*solid-6, 12*solid-6, 12, 12);
       ctn.lineWidth = 1;//边框宽度


       var chessBoard = [];

       for (var i = 1; i < 15; i++) {
           chessBoard[i] = [];
           for (var j = 1; j < 15; j++) {
               chessBoard[i][j] = 0;
           }
       }

       var wins = [];
       var count = 0;

       for(var i = 1; i < 15; i++) {
           wins[i] = [];
           for (var j = 1; j < 15; j++) {
               wins[i][j] = [];
           }
       }

       for(var i = 1; i < 15; i++) {         //计算上下方向赢法的次数
           for (var j = 1; j < 11; j++) {
               for (var k = 0; k < 5; k++) {
                   wins[i][j+k][count] = true;
               }
               count++;
           }
       }

       for(var i = 1; i < 15; i++) {      //计算左右方向赢法的次数
           for (var j = 1; j < 11; j++) {
               for (var k = 0; k < 5; k++) {
                   wins[j+k][i][count] = true;
               }
               count++;
           }
       }

       for(var i = 1; i < 11; i++) {      //计算左下右上方向赢法的次数
           for (var j = 1; j < 11; j++) {
               for (var k = 0; k < 5; k++) {
                   wins[i+k][j+k][count] = true;
               }
               count++;
           }
       }

       for(var i = 1; i < 11; i++) {       //计算左上右下赢法的次数
           for (var j = 14; j > 4; j--) {
               for (var k = 0; k < 5; k++) {
                   wins[i+k][j-k][count] = true;
               }
               count++;
           }
       }
       for(var i=1;i<count;i++){
              computer[i]=0;
              my[i]=0;
       }

       var myWin=[];
       var computerWin=[];
       var over=false;

       for(var i=0;i<count;i++){
           myWin[i]=0;
           computerWin[i]=0;
       }
       var drawChess=function(i,j,me){

           if(me){
                 a1=i;
                 b1=j;
              ctn.drawImage(imgblack, i *solid - solid/2, j * solid - solid/2);

           }else{
               a2=i;
               b2=j;
               ctn.drawImage(imgwhile,  i *solid - solid/2, j * solid - solid/2);

           }

       }

       function chessClick(e) {

           if(over){
               return;
           }
           if(!me){
               return;
           }
           var x=e.offsetX;
           var y=e.offsetY;
           var i=Math.round(x/solid);
           var j=Math.round(y/solid);
           if(i==0){
               return;
           }
           if(j==0){
               return;
           }
           if(chessBoard[i][j]==0){

               drawChess(i,j,me);

               chessBoard[i][j]=1;

               for(var k=0; k<count; k++){
                   if (wins[i][j][k]) {
                       myWin[k]++;
                        computer[k]=computerWin[k];
                       computerWin[k] = 6;
                       if (myWin[k] == 5) {
                           window.alert("你赢了!");
                           over = true;
                       }
                   }
               }
               if(!over){

                  me=!me;
                  computerAI();
               }
           }

       }

       var computerAI=function(){

           var myScore=[];
           var computerScore=[];
           var max=0;
           var u=0,v=0;
           for(var i=0;i<15;i++){
               myScore[i]=[];
               computerScore[i]=[];
               for(var j=0;j<15;j++){
                   myScore[i][j]=0;
                   computerScore[i][j]=0;
               }
           }
           for(var i=1;i<15;i++){
               for(var j=1;j<15;j++){
                   if(chessBoard[i][j]==0){

                       for(var k=0;k<count;k++){
                           if(wins[i][j][k]){
                               if(myWin[k]==1){

                                   myScore[i][j]+=200;

                               }else if(myWin[k]==2){

                                   myScore[i][j]+=400;

                               }else if(myWin[k]==3){
                                   myScore[i][j]+=2000;

                               }else if(myWin[k]==4){
                                   myScore[i][j]+=43000;
                               }
                               if(computerWin[k]==1){
                                   computerScore[i][j]+=320;
                               }else if(computerWin[k]==2){
                                   computerScore[i][j]+=420;
                               }else if(computerWin[k]==3){
                                   computerScore[i][j]+=8000;
                               }else if(computerWin[k]==4){
                                   computerScore[i][j]+=50000;
                               }
                           }
                       }

                       if(myScore[i][j]>max){
                           max=myScore[i][j];
                           u=i;
                           v=j;
                       }else if(myScore[i][j]==max){
                           if(computerScore[i][j]>computerScore[u][v]){
                               u=i;
                               v=j;
                           }
                       }
                       if(computerScore[i][j]>max){
                           max=computerScore[i][j];
                           u=i;
                           v=j;
                       }else if(computerScore[i][j]==max){
                           if(myScore[i][j]>myScore[u][v]){
                               u=i;
                               v=j;
                           }
                       }
                   }
               }
           }
            //alert(myScore[7][5])
           drawChess(u,v,false);
           chessBoard[u][v]=2;
           for(var k=0; k<count; k++){
               if (wins[u][v][k]) {
                   computerWin[k]++;
                   my[k]=myWin[k];

                   myWin[k] = 6;
                   if (computerWin[k] == 5) {
                       window.alert("计算机赢了!");
                       over = true;
                   }
               }
           }
           if(!over){
               me=!me;
           }
       }

       function undo() {
           chessBoard[a1][b1]=0;
           chessBoard[a2][b2]=0;
           for(var i=0;i<count;i++){
               myWin[i]=0;
               computerWin[i]=0;
           }
            for(var i=1;i<15;i++) {
                for (var j = 1; j < 15; j++) {
                    if(chessBoard[i][j]==1){
                        for(var k=0;k<count;k++){
                            if (wins[i][j][k]){
                                myWin[k]++;
                                computerWin[k]=6;
                            }

                        }
                    }
                    if(chessBoard[i][j]==2){
                        for(var k=0;k<count;k++){
                            if (wins[i][j][k]){
                                myWin[k]=6;
                                computerWin[k]++;
                            }

                        }
                    }

                }
            }
           ctn.clearRect(a1*solid-solid/2,b1*solid-solid/2,34,34);
           //绘制横线
           ctn.beginPath();
           ctn.moveTo(a1*solid-solid/2, b1*solid);
           ctn.lineTo(a1*solid+solid/2, b1*solid);
           ctn.closePath();
           ctn.stroke();

           ctn.clearRect(a2*solid-solid/2,b2*solid-solid/2,34,34);
           //绘制横线
           ctn.beginPath();
           ctn.moveTo(a2*solid-solid/2, b2*solid);
           ctn.lineTo(a2*solid+solid/2, b2*solid);
           ctn.closePath();


           ctn.stroke();

           //绘制竖线
           ctn.beginPath();
           ctn.moveTo(a1*solid,  b1*solid-solid/2);
           ctn.lineTo(a1*solid,  b1*solid+solid/2);
           ctn.closePath();
           ctn.stroke();
           if (a1==3&&b1==3||a1==12&&b1==3||a1==7&&b1==7||a1==3&&b1==12||a1==12&&b1==12){
               ctn.fillStyle = "#000";//填充canvas的背景颜色
               ctn.fillRect(a1*solid-6, b1*solid-6, 12, 12);//参数分别表示 x轴,y轴,宽度,高度
               ctn.lineWidth = 1;//边框宽度
           }



           //绘制竖线
           ctn.beginPath();
           ctn.moveTo(a2*solid,  b2*solid-solid/2);
           ctn.lineTo(a2*solid,  b2*solid+solid/2);
           ctn.closePath();
           ctn.stroke();
           if (x==3&&y==3||x==12&&y==3||x==7&&y==7||x==3&&y==12||x==12&&y==12){
               ctn.fillStyle = "#000";//填充canvas的背景颜色
               ctn.fillRect(a2*solid-6, b2*solid-6, 12, 12);//参数分别表示 x轴,y轴,宽度,高度
               ctn.lineWidth = 1;//边框宽度
           }
       }
   </script>
</body>
</html>